<template>
  <view class="shadow p-4 bg-white card-content">
    <view>
      <text class="font-bold text-base">
        {{ device.name || '' }}
      </text>
      <text class="room-location">
        {{ device.roomNumber || ''}}
      </text>
    </view>
    <view class="p-2 w-full grid grid-cols-3">
      <!-- <view style="width: 108rpx; height: 108rpx;" class="bg-blue-500"> </view> -->
      <!-- <cmd-progress :strokeWidth="10" :width="100" strokeColor="blue" type="circle" :percent="75"></cmd-progress> -->
      <view class="circle-quality">
        <cmd-progress type="circle" :percent="device.properties.quality || 0" :strokeColor="getTextColor(device.properties.quality)" :stroke-width="12" :width="80" :showInfo="false"></cmd-progress>
        <view class="quality-content">
          <view class="quality-percent">{{ device.properties.quality }}</view>
          <view :style="{ color: getTextColor(device.properties.quality) }" class="quality-text">{{ device.properties.quality | qualityText }}</view>
        </view>
      </view>
      <view class="flex flex-col justify-around self-stretch">
        <view>
          <text>
            温度
          </text>
        </view>
        <view class="flex items-center">
          <image src="/static/icons/temp.png" class="icon mr-2">
          </image>
          <text>
            {{ device.properties.Temp | tempFix }} ℃
          </text>
        </view>
      </view>
      <view class="flex flex-col justify-around self-stretch">
        <view>
          <text>
            湿度
          </text>
        </view>
        <view class="flex items-center">
          <image src="/static/icons/humi.png" class="icon mr-2">
          </image>
          <text>
            {{ device.properties.Humi | humiFix }} %
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { cmdProgress } from "@/components/cmd-progress/cmd-progress.vue"
import { getQualityByValue, getTextColor } from "@/utils/device";
export default {
  components: {
    cmdProgress,
  },
  props: {
    device: {
      type: Object,
      default: {}
    }
  },
  filters: {
    statusText(status) {
      return status === 0 ? '已关闭': '开启中'
    },
    tempFix(temp) {
      if (temp) {
        return temp.toFixed(0)
      }
      return '--'
    },
    humiFix(humi) {
      if (humi) {
        return humi.toFixed(0)
      }
      return '--'
    },
    qualityText(quality) {
      if (quality)
        return getQualityByValue(quality, 'quality')
      return '优'
    }
  },
  methods: {
    getTextColor(quality) {
      return getTextColor(getQualityByValue(quality, 'quality'))
    },
  }
}
</script>

<style lang="scss" scoped>
.icon {
  width: 38rpx;
  height: 38rpx;
}

.card-content {
  margin-top: 20rpx;
}

.room-location {
  margin-left: 18rpx;
  color: #808695;
  width:129rpx;
  height:40rpx;
  font-size:28rpx;
  font-family:PingFang SC;
  font-weight:400;
  line-height:40px;
}

.circle-quality {
  // width: 80rpx;
  // height: 80rpx; 
  display: flex;
  justify-content: flex-start;
  position: relative;
  // margin-bottom: 6rpx;
  .quality-content {
    position: absolute;
    text-align: center;
    top: 30%;
    left: 30%;
  }
  .quality-percent {
    font-size:32rpx;
    line-height: 1;
    padding-bottom: 6rpx;
  }
  .quality-text {
    font-size:30rpx;
    // color: #0B90F1;
  }
}
</style>
